<template>
  <el-card class="box-card mg">
    <template #header>
      <div class="card-header">
        <span>{{ type }}</span>
        <div style="text-align: right">
          <el-button type="success" @click="preQuestion" v-if="0 < a && a <= paper.questions.length-1">上一题
          </el-button>
          <el-button type="primary" @click="nextQuestion" v-if="a <= paper.questions.length-2">下一题</el-button>
        </div>
      </div>
    </template>
    <div class="text item">
      <label>{{ paper.questions[`${a}`].question_number}}.{{ paper.questions[`${a}`].question }}</label>
    </div>
    <div v-for="(a,i) in paper.questions[`${a}`].answer" :key="i" class="text item">{{ a.option }}.&nbsp;{{
        a.text
      }}
    </div>
    <div class="text item">
      <span style="font-weight: bold">请<span v-if="paper.questions[`${a}`].type_number !== '3'">选择</span><span v-else>输入</span>你的答案：</span><br><br>
<!--      单选-->
      <div v-if="paper.questions[`${a}`].type_number === '1'">
        <el-radio-group v-model="radioAnwserList[`${a}`][1]">
          <el-radio :label="answer.option" border v-for="(answer,i) in paper.questions[`${a}`].answer" :key="i" @change="changeRaidoResult"/>
        </el-radio-group>
      </div>
<!--      多选-->
      <div v-if="paper.questions[`${a}`].type_number === '2'">
        <el-checkbox :label="anws.option" v-model="anwserList[`${a}`][1]" border v-for="(anws,i) in paper.questions[`${a}`].answer" :key="i" @change="sortCheckBox"/>
      </div>
<!--简答题-->
      <div v-if="paper.questions[`${a}`].type_number === '3'">
        <el-input :autosize="{ minRows: 10, maxRows: 10 }" type="textarea" placeholder="请输入你的答案:" v-model="radioAnwserList[a][1]" @input="changeRaidoResult"/>

      </div>
<!--      判断-->
      <div v-if="paper.questions[a].type_number === '4'">
        <el-radio-group v-model="radioAnwserList[a][1]" @change="changeRaidoResult">
          <el-radio label="A" border />
          <el-radio label="B" border />
        </el-radio-group>
      </div>
    </div>
    <span style="font-weight: bold" v-if="anwserList[a] != null & paper.questions[`${a}`].type_number !== '3'">你已选择的答案:{{anwserList[`${a}`][1]}}</span>
    <div class="text item">
      <div class="demo-collapse">
        <el-collapse>
          <el-collapse-item title="查看答案和解析" name="1">
            <div>
              正确答案：
              <el-tag class="ml-2" type="info">{{paper.questions[`${a}`].right}}</el-tag>

            </div>
            <div>
              <el-tag class="ml-2">
                解析：
              </el-tag>
              {{paper.questions[`${a}`].correct_answer}}
            </div>
          </el-collapse-item>

          <el-collapse-item title="笔记" name="2">
            <div>
              正确答案：
              <el-tag class="ml-2" type="info">{{paper.questions[`${a}`].right}}</el-tag>

            </div>
            <div>
              解析：
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </el-card>

</template>

<script setup>
import usequickExamStore from "../../../store/quickExamStore";
import {onMounted, ref, watch} from "vue";

const qe = usequickExamStore()

const color = ref('')
const a = ref(0)
const label = ref("")
const type = ref("")
const paper = ref()
const anwserList = ref([0,[]])
const radioAnwserList = ref([0,[]])
const checkboxResult = ref([])

paper.value = qe.paper

onMounted(() => {
  for (let i = 0; i < paper.value.question_type.length; i++) {
    if (paper.value.question_type[i].type_number === paper.value.questions[a.value].type_number) {
      type.value = paper.value.question_type[i].description
    }
  }
  anwserList.value= new Array(paper.value.questions.length)
  radioAnwserList.value= new Array(paper.value.questions.length)
  for (let i = 0; i < anwserList.value.length; i++) {
    anwserList.value[i] = [i,[]]
    radioAnwserList.value[i] = [i,[]]
  }
})

const changeRaidoResult = () => {
  anwserList.value[a.value] =[a.value,[radioAnwserList.value[a.value][1]]]
}

const sortCheckBox = () => {
  anwserList.value[a.value][1] =anwserList.value[a.value][1].sort()
}

const nextQuestion = () => {
  if (checkboxResult.value.length !== 0){
    checkboxResult.value = []
  }
  if (a.value < paper.value.questions.length - 1) {
    a.value++
    label.value = paper.value.questions[a.value].question_number
    for (let i = 0; i < paper.value.question_type.length; i++) {
      if (paper.value.question_type[i].type_number === paper.value.questions[a.value].type_number) {
        type.value = paper.value.question_type[i].description
      }
    }
  }
}

const preQuestion = () => {

  if (a.value <= paper.value.questions.length - 1 && a.value >= 0) {
    a.value--
    label.value = paper.value.questions[a.value].question_number
    for (let i = 0; i < paper.value.question_type.length; i++) {
      if (paper.value.question_type[i].type_number === paper.value.questions[a.value].type_number) {
        type.value = paper.value.question_type[i].description
      }
    }
  }
}


watch([() => qe.num, () => anwserList.value], ([newValue1, newValue2], [oldValue1, oldValue2]) => {
  // 处理值变化的逻辑
  if (newValue1 !== oldValue1){
    a.value = newValue1
  }
  if (newValue2 !== oldValue2){
    qe.setAnwser(anwserList.value)
  }
},
    {
      deep: true
    }
);


</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
  border-radius: 20px;
}
</style>